<template>
  <div class="cremation_statistics overflowY" v-loading="loading">
    <div class="PageContent">
      <div class="PageItem">
        <div id="myPieCharts" ref="myPieCharts"></div>
      </div>
    </div>
  </div>
</template>

<script>

import * as API from '@/api/civilAffairsBureau/index'
export default {
  data() {
    return {
      loading: true, //加载
      myPieCharts: null, //饼图
      allPieData: [], //返回饼图数据
    };
  },
  created() {
    setTimeout(() => {
      this.getPieData();
    }, 1000);
  },
  mounted() {
    //初始化饼图表
    this.initMyPieCharts();
    window.removeEventListener("resize", () => {
      this.myPieCharts.resize();
    });
  },
  methods: {
    //初始化饼图图表
    initMyPieCharts() {
      this.myPieCharts = this.$echarts.init(this.$refs.myPieCharts);
      const initOption = {
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#8378ea",
        ],
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
        },
        legend: {
          bottom: 0,
          textStyle: {
            color: "#8C8C8C",
          },
        },
        series: [],
      };
      this.myPieCharts.setOption(initOption);
    },
    //获取饼图数据
    async getPieData() {
      this.allPieData=[]
        const res = await API.findCemeteryPrice()

        if(res.code==1){
          if(!res.data || res.data.resCemeteryTypes==''|| res.data.resCemeteryTypes==null){
            let obj={
              name:'暂无数据',
              value:0
            }
            console.log('000000000000000')
            this.allPieData.push(obj)
          }else {
            res.data.resCemeteryTypes.forEach(item=>{
              let obj={
                name:item.price,
                value:item.number
              }
              this.allPieData.push(obj)
            })
          }

        }else{
          this.$message.error('数据读取失败');
        }
      this.updatePieChart();
    },
    //更新饼图
    updatePieChart() {
      this.myPieCharts.showLoading();
      const dataOption = {
        series: [
          {
            name: "消费水平",
            type: "pie",
            radius: [0, 200],
            data: this.allPieData,
          },
        ],
      };

      this.myPieCharts.setOption(dataOption);
      this.myPieCharts.hideLoading();
      this.loading=false
    },
  },
  destroyed() {
    window.removeEventListener("resize", () => {
      this.myPieCharts.resize();
    });
  },
};
</script>

<style lang="scss" scoped>
.cremation_statistics {
  width: 100%;
  .PageItem {
    height: auto;
  }
  .PageContent /deep/ .el-input {
    width: 300px;
  }
  .PageContent /deep/ .el-select {
    width: 300px;
  }
  #myPieCharts {
    width: 600px;
    height: 500px;
    margin: 0 auto;
  }
}
</style>
